<template>
    <div class="body">
        <div class="nav">
            <div class="show">
                <div :id="[data.isType == true ? 'style1' : 'style2']" @click="all">全部商品</div>
                <div :id="[data.isType2 == true ? 'style1' : 'style2']" @click="shelves">上架商品</div>
                <div :id="[data.isType3 == true ? 'style1' : 'style2']" @click="down">下架商品</div>
            </div>
            <div class="add" @click="toAdd">
                <el-button type="warning"><span>+</span>添加商品</el-button>
            </div>
        </div>
        <div class="select">
            <div class="sele">筛选条件</div>
            <el-form>
                <el-form-item id="def" label="商品名称或编号">
                    <label style="width:30%">
                        <el-input v-model="selectNum" placeholder="商品名称或编号" />
                    </label>
                    <el-button type="primary" @click="select">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table :data="tablePage" style="width: 100% ;color:#438ACA"
                :header-cell-style="{ background: '#438ACA', color: '#fff' }">
                <el-table-column prop="good_Number" label="商品编号" align="center" />
                <el-table-column prop="good_Name" label="商品名称" align="center" />
                <el-table-column prop="good_ShangPinJiaGe,good_DuiHuanJiFen" label="单价/积分" align="center">
                    <template v-slot="scope">
                        {{ scope.row.good_ShangPinJiaGe }}/{{ scope.row.good_DuiHuanJiFen }}
                    </template>
                </el-table-column>
                <el-table-column prop="good_KuChun" label="库存" align="center" />
                <el-table-column prop="good_ZhuangTai" label="状态" align="center">
                    <template v-slot="scope">
                        <el-button size="small" style="background:#32AF9B;color:#fff"
                            v-if="scope.row.good_ZhuangTai == 1" @click="goodType(scope.row)">上架
                        </el-button>
                        <el-button size="small" style="background:#AAAAAA;color:#000"
                            v-if="scope.row.good_ZhuangTai == 0" @click="goodType(scope.row)">下架
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template v-slot="scope">
                        <el-button @click="update(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div>共<span>{{ pageMax }}</span>页/<span>{{ data.data.length }}</span>条数据</div>
                <el-pagination layout=" prev, pager, next" :page-count="pageMax" :current-page="data.page" background
                    @current-change="clickPage">
                </el-pagination>
                <div>跳至<input class="ent" type="text" v-model="data.page" :change="ent(data.page)">页
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'
const data = reactive({
    data: [],//所有数据
    dataSelect:[],//搜索出来的数据
    tableData: '',//分页加工的数据
    page: 1,//初始页
    isType: true,//样式状态
    isType2: false,//样式状态
    isType3: false,//样式状态
})
const selectNum = ref('')//搜索的值
const router = useRouter()//路由命名
//初始请求数据
const index =()=>{
    axios({
        url:'http://localhost:3001/allGoods',
        method:'get'
    }).then((res)=>{
        if(res.data.code == 200){
            data.data = res.data.data
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
index()
//点击翻页
const clickPage = (num) => { 
    data.page = parseInt(num)
}
//分页显示多少数据
const tablePage = computed(() => {
    let nowPage = (data.page - 1) * 10;
    return data.data.slice(nowPage, nowPage + 10)
})
//最大页码
const pageMax = computed(() => {
    return Math.ceil(data.data.length / 10);
})
//跳转至某页
const ent = (page) => {
   if(page != ''){
        data.page = parseInt(page)
   }
}
//上下架
const goodType = (type) => {
    axios({
        url:'http://localhost:3001/goodsType',
        method:'post',
        data:{
            id:type.Id,
            good_ZhuangTai:type.good_ZhuangTai
        }
    }).then((res)=>{
        if(res.data.code == 200){
            ElMessage({
                message: '更改商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            index()
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
//所有数据
const all = () => {
    axios({
        url:'http://localhost:3001/allGoods',
        method:'get'
    }).then((res)=>{
        if(res.data.code == 200){
            ElMessage({
                message: '加载全部商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            data.isType = true
            data.isType2 = false
            data.isType3 = false
            data.data = res.data.data
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
//上架数据
const shelves = () => {
    axios({
        url:'http://localhost:3001/shelvesData',
        method:'get'
    }).then((res)=>{
        if(res.data.code == 200){
            ElMessage({
                message: '加载上架商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            data.isType = false
            data.isType2 = true
            data.isType3 = false
            data.data = res.data.data
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
//下架数据
const down = () => {
    axios({
        url:'http://localhost:3001/downDate',
        method:'get'
    }).then((res)=>{
        if(res.data.code == 200){
            ElMessage({
                message: '加载下架商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            data.isType = false
            data.isType2 = false
            data.isType3 = true
            data.data = res.data.data
        }else{
            ElMessage({
                message: '服务器获取信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
//添加
const toAdd = () => {
    router.push({ path: '/home/AddFoods' })
}
//编辑
const update = (all) => {
    router.push({ name: 'AddFoods', params: all })
}
//搜索
const select = () => {
    axios({
        url:'http://localhost:3001/allGoods',
        method:'get'
    }).then((res)=>{
        if(res.data.code == 200){
            data.data = res.data.data
            data.dataSelect = []
            for (let i = 0; i < data.data.length; i++) {
                if(data.data[i].good_Name.indexOf(selectNum.value)!= -1 || data.data[i].good_Number.indexOf(selectNum.value) != -1){
                    data.dataSelect.push(data.data[i])
                }
            }
            selectNum.value = ''
            ElMessage({
                message: '搜索商品信息成功',
                grouping: true,
                type: 'success',
                center: true,
            })
            data.data = data.dataSelect
        }else{
            ElMessage({
                message: '获取搜索信息异常',
                grouping: true,
                type: 'warning',
                center: true,
            })
        }
    }).catch((err)=>{
        ElMessage({
            message: '数据库访问出错,请稍后再试',
            grouping: true,
            type: 'warning',
            center: true,
        })
    })
}
</script>

<style lang="less" scoped>
.body {
    font-size: 10px;
    padding: 1rem;
    background: #fff;
}

#style1 {
    background: #fff;
    color: #000;
}

#style2 {
    background: #333333;
    color: #c9c3bc;
}

.nav {
    background: #333333;
    color: #c9c3bc;
    font-size: 0.8rem;
    padding: 0 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    .show {
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
        flex-direction: row;
        height: 2.5rem;
        line-height: 2.5rem;

        div {
            height: 100%;
            padding: 0 2rem;
            cursor: pointer;
        }
    }

    .el-button {
        border-radius: 2px;
        padding: 0 2rem;
        background: #F38108;
    }

    .el-button:hover {
        background: #f7b56e;
    }
}

.select {
    margin-top: 1rem;
    border: 1px solid #E4E4E4;

    .sele {
        background: #F2F2F2;
        font-size: 0.8rem;
        line-height: 3rem;
        padding-left: 2rem;
        height: 3rem;
    }

    #def {
        margin: 0;
        padding: 0 2rem;
        align-items: center;
        height: 4rem;
        line-height: 4rem;

        label {
            padding: 0 2rem;
        }

        button {
            width: 5rem;
        }
    }
}

.table {
    .el-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page {
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        align-content: center;

        span {
            color: red
        }

        .ent {
            margin: 0 1rem;
            width: 0.9rem;
            height: 0.9rem;
            padding: 0.5rem;
            border: 1px solid #e3e3e3;
            border-radius: 2px;
        }
    }
}
</style>